<!-- Tutorial highlights
  Used to show tutorial elements by highlighting the corresponding DOM component,
  automatically put explanation contents near said component,
  and put an "Okay, got it" button and optionally a "Remind me later"
  button to dismiss

  Implementation: use a very thick
  (~8000px or double Math.max(screen.width, screen.height)) border for highlighing

  _setTarget() adapted from paper-tooltip of Polymer library
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../../bower_components/iron-localstorage/iron-localstorage.html">
<link rel="import" href="../genemo-styles.html">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,400italic,700italic,700,400" rel="stylesheet" type="text/css">
<dom-module id="tutorial-highlight">
  <template>
    <style include="genemo-shared-styles">
    :host {
      font-size: 16px;
    }
    #highlighter {
      position: fixed;
      color: var(--highlighter-text-color, var(--dark-theme-text-color));
      z-index: 1000;
    }
    #highlighter > div {
      /* This is the div implementing --highlighter-margin */
      position: absolute;
      top: calc(0px - var(--highlighter-margin, 20px));
      left: calc(0px - var(--highlighter-margin, 20px));
      right: calc(0px - var(--highlighter-margin, 20px));
      bottom: calc(0px - var(--highlighter-margin, 20px));
    }
    #highlighter > div::before {
      content: '';
      outline: solid var(--highlighter-border-width, 9999px) var(--highlighter-color, var(--default-primary-color));
      @apply(--layout-fit);
      opacity: 0.9;
    }
    #highlighter > div::after {
      content: '';
      @apply(--layout-fit);
      border: solid 1px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3);
    }
    #dialogBox {
      position: absolute;
      padding: 10px;
      max-width: 500px;
      line-height: 24px;
    }
    paper-button {
      background: var(--highlighter-color, var(--default-primary-color));
      color: var(--highlighter-text-color, var(--dark-theme-text-color));
      font-size: 16px;
    }
    </style>
    <div id="highlighter" hidden$="[[isHidden]]">
      <div>
        <div id="dialogBox">
          <content></content>
          <paper-button on-tap="_permCloseTutorial">Okay, got it</paper-button>
          <template is="dom-if" if="[[!disableRemindLater]]">
            <paper-button on-tap="_tempCloseTutorial">Remind me later</paper-button>
          </template>
        </div>
      </div>
    </div>
    <iron-localstorage name="genemo-storage" value="{{tutorialFlags}}">
    </iron-localstorage>
  </template>
  <script type="text/javascript">
    var GIVe = (function (give) {
      'use strict'

      give.TutorialHighlight = Polymer({
        is: 'tutorial-highlight',

        properties: {
          domTargetId: {
            // the target of tutorial
            // if unspecified, then it's the parent node
            type: String,
            observer: '_setTarget'
          },

          tutorialKey: {
            type: String,
            value: 'defaultTutorial'
          },

          isHidden: {
            type: Boolean,
            value: true,
            readOnly: true
          },

          disableRemindLater: {
            type: Boolean,
            value: false
          },

          tutorialFlags: {
            type: Object
          }
        },

        _setTarget: function () {
          var parentNode = Polymer.dom(this).parentNode
          // If the parentNode is a document fragment, then we need to use the host.
          var ownerRoot = Polymer.dom(this).getOwnerRoot()

          if (this.domTargetId) {
            this.target = Polymer.dom(ownerRoot).querySelector('#' + this.domTargetId)
          } else {
            this.target = (parentNode.nodeType === window.Node.DOCUMENT_FRAGMENT_NODE)
              ? ownerRoot.host : parentNode
          }
        },

        _adjustSizeLayoutAndShow: function () {
          // adjust size and layout according to this.domTarget
          if (!this.target) {
            this._setTarget()
            if (!this.target) {
              throw new Error('Target not set for tutorial-highlight element.')
            }
          }
          var rect = this.target.getBoundingClientRect()
          this.$.highlighter.style.top = rect.top + 'px'
          this.$.highlighter.style.left = rect.left + 'px'
          this.$.highlighter.style.height = rect.height + 'px'
          this.$.highlighter.style.width = rect.width + 'px'

          this._setIsHidden(false)
          Polymer.dom.flush()
          var insideRect = this.$$('#highlighter > div').getBoundingClientRect()

          // find the largest region to put <content></content>
          if (rect.left + rect.right > window.innerWidth) {
            // put content to the left
            this.$.dialogBox.style.right = '20px'
          } else {
            // put content to the right
            this.$.dialogBox.style.left = '20px'
          }
          if (rect.top + rect.bottom > window.innerHeight) {
            // put content to the top
            this.$.dialogBox.style.bottom = '20px'
          } else {
            this.$.dialogBox.style.top = insideRect.height + 20 + 'px'
          }
        },

        _tempCloseTutorial: function () {
          this._setIsHidden(true)
        },

        _permCloseTutorial: function () {
          this.set('tutorialFlags.' + this.tutorialKey, true)
          this._tempCloseTutorial()
        },

        showTutorial: function (forceShow) {
          if (!this.tutorialFlags) {
            this.tutorialFlags = {}
          }
          if (forceShow || !this.tutorialFlags[this.tutorialKey]) {
            this._adjustSizeLayoutAndShow()
          }
        }
      })

      return give
    })(GIVe || {})
  </script>
</dom-module>
